
{extend name='public/base' /}


{block name="content"}

<div class="layui-col-md12">

    <div class="layui-card">

        <div class="layui-card-body">

            <div class="layui-card-header">设置我的资料</div>
            <div class="layui-card-body" >

                <div class="layui-form" lay-filter="">

                   <input type="hidden" name="id"  value="{$info.id}">

                    <div class="layui-form-item">
                        <label class="layui-form-label">头像：</label>
                        <div class="layui-input-inline">
                            <input name="avatar" lay-verify="" lay-verType="tips" lay-reqText="" id="path_" placeholder="" value="{$info.avatar}"  readonly class="layui-input">
                        </div>
                        <div class="layui-input-inline layui-btn-container" style="width: auto;">
                            <button type="button" class="layui-btn layui-btn-primary" id="LAY_up">
                                <i class="layui-icon">&#xe67c;</i>修改头像
                            </button>
                            <a class="layui-btn layui-btn-warm" id="chan_pic">素材库选择</a >
                        </div>
                    </div>
                    <div class="layui-form-item ">
                        <label class="layui-form-label">图片显示：</label>
                        <div class="layui-input-inline">
                            <div class="layui-upload">
                                <div class="layui-upload-list">
                                    <img class="layui-upload-img" style="cursor: pointer;" title="点击查看大图" src="{if $info['avatar'] neq null}{$info.avatar}{else}__IMG__/default_upload.png{/if}" id="s_show" width="150" height="110">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label label-required-next">用户名：</label>
                        <div class="layui-input-inline input-custom-width" style="">
                            <input type="text" name="username" value="{$info.username}" placeholder="请输入管理员用户名" lay-verify="required" lay-vertype="tips" lay-reqtext="请输入管理员用户名" autocomplete="off" class="layui-input ">
                        </div>
                        <label class="layui-form-label ">昵称：</label>
                        <div class="layui-input-inline input-custom-width" style="">
                            <input type="text" name="nickname" value="{$info.nickname}" placeholder="管理员昵称" lay-verify="" lay-vertype="tips" lay-reqtext="请输入管理员昵称" autocomplete="off" class="layui-input ">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">手机号：</label>
                        <div class="layui-input-inline input-custom-width" style="">
                            <input type="text" name="phone" value="{$info.phone}" placeholder="请输入手机号" lay-verify="" lay-vertype="tips" lay-reqtext="请输入手机号" autocomplete="off" class="layui-input ">
                        </div>
                        <label class="layui-form-label ">邮箱：</label>
                        <div class="layui-input-inline input-custom-width" style="">
                            <input type="text" name="email" value="{$info.email}" placeholder="管理员邮箱" lay-verify="" lay-vertype="tips" lay-reqtext="请输入管理员邮箱" autocomplete="off" class="layui-input ">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">生日：</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" value="{$info.birthday}" name="birthday" id="test1" placeholder="yyyy-MM-dd">
                        </div>
                    </div>


                    <div class="layui-form-item">
                        <label class="layui-form-label">性别：</label>
                        <div class="layui-input-block">
                            <input type="radio" name="sex" value="0" {eq name="$info.sex" value="0" }  checked {/eq} title="男">
                            <input type="radio" name="sex" value="1" {eq name="$info.sex" value="1" }  checked {/eq} title="女" >
                            <input type="radio" name="sex" value="2" {eq name="$info.sex" value="2" }  checked {/eq} title="保密" >
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">状态：</label>
                        <div class="layui-input-inline input-custom-width">
                            <input type="radio" name="status" value="1" title="正常"  lay-filter=""  {eq name="$info.status" value="1" }  checked {/eq}>
                            <input type="radio" name="status" value="2" title="拉黑" lay-filter="" {eq name="$info.status" value="2" }  checked {/eq}>
                        </div>
                    </div>

                    <input type="hidden" name="__token__" id="token" value="{:token()}"/>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="setmyinfo">确认修改</button>
                        </div>
                    </div>
                </div>

            </div>


        </div>
    </div>

</div>


{/block}

{block name="js"} <!--js处理区-->

<script>

    layui.use(['element','form', 'jquery','lucky','laydate','upload'], function () {
        var element = layui.element;
        var form = layui.form;
        var $ = layui.jquery;
        var lucky=layui.lucky;
        var upload = layui.upload;
        var laydate = layui.laydate;

        form.render();

        //常规用法
        laydate.render({
            elem: '#test1'
        });


        //图片上传
        upload.render({
            elem:'#LAY_up'
            ,url: "{:url('Common/UpImg')}" //图片上传地址
            ,accept: 'images' //
            ,acceptMime: 'image/*'
            ,size: 1024*12
            ,before:function (res) {
                loading = layer.load(2, {
                    shade: [0.2, '#000'] //0.2透明度的白色背景
                });
            }
            ,done: function(data){
                layer.close(loading);
                if (data.code==1){
                    layer.msg(data.msg, {icon: 1, time: 1000},function () {
                        $("#s_show").attr("src",data.data.dir);
                        $("#path_").val(data.data.dir);
                    });
                } else {
                    layer.msg(data.msg, {icon: 5, time: 1000});
                }
            }
            ,error:function (red) {
                layer.close(loading);
                layer.msg("网络错误", {icon: 5, time: 1500});
            }
        });



        // 弹窗选择
        $('#chan_pic').click(function () {
            layer.open({
                title:"选择素材图片",
                type: 2,
                area: ["80%", "90%"],
                offset:'auto',
                maxmin : true,
                skin:'layui-layer-molv',
                shade: 0.5,
                content: "{:url('AttachMents/getImages')}",
                success:function(){
                    setTimeout(function(){
                        layui.layer.tips('点击此处返回列表', '.layui-layer-setwin .layui-layer-close', {
                            tips: 3,time:1000
                        });
                    },500)
                },
                end:function () {
                    if (typeof(mFsUrls) != "undefined" && mFsUrls.length > 0) {
                        $("#path_").val(mFsUrls);
                        $("#s_show").attr("src",mFsUrls);
                    }
                }
            });
            return false;
        });


        /**
         * 点击查看大图
         */
        $("#s_show").click(function () {
            layer.photos({
                photos: {
                    title: "查看图片",
                    data: [{
                        src: $(this).attr("src")
                    }]
                },
                shade: .01,
                closeBtn: 1,
                anim: 5
            });
        });

        /**
         * 鼠标显示
         */
        $('#path_').hover(function(){
            var img = "<img class='img_msg' src='"+$(this).val()+"' style='width:100%;max-height: 600px;' />";
            img_show = layer.tips(img, this,{
                tips:[2, 'rgba(41,41,41,.0)']
                ,area: ['12%']
            });
        },function(){
            layer.close(img_show);
        });

        /**
         * 表格提交
         */
        form.on('submit(setmyinfo)', function (data) {
            lucky.FormSubmit("{:url('Admin/baseData')}",data.field);
            return false;
        });

    });

</script >


{/block}
